<template>
    <Dialog :title="comInfo.name" :show="true" @close="cancel" :width="350" :height="300" :left="uiLeft" :top="uiTop">
        <div class="box">
            <!-- 功能按钮 -->
            <div class="cimrts-menu">
                <FucMenuList :menuList="placeMenuList" @clickComponent="clickComponent" :isDisabled="false"
                    :isChecked="true" />
            </div>
            <div class="box-choose">
                <div class="item">
                    <span>数据集：</span>
                    <el-select v-model="currentDataSetRef" placeholder="请选择">
                        <el-option v-for="item in dataSetRef" :key="item" :label="item" :value="item" />
                    </el-select>
                </div>
                <div class="item">
                    <span>要素类：</span>
                    <el-tree-select v-model="currentFeatureClassRef" :data="featureClassTreeRef" check-strictly
                        :render-after-expand="false" @change="changedTree" />
                </div>
                <div class="item">
                    <span>几何体：</span>
                    <div class="choose-img">
                        <el-input v-model="currentGeometryRef" style="width: 234px;" :disabled="true"
                            clearable @clear="clearGeometry" />
                        <div class="list-img choose" @click="chooseClick" title="选择"
                            :class="{ 'no-choose': !currentFeatureClassRef }"></div>
                    </div>
                    <!-- <el-button @click="chooseClick">选择</el-button> -->
                </div>
                <div class="beizhu" v-if="geometryId">提示：该几何体 &nbsp;&nbsp;长：{{ geometryLengthRef }} &nbsp;&nbsp;
                    宽：{{ geometryHeightRef }}&nbsp;&nbsp; 高：{{ geometryWeightRef }}</div>
                <div class="point-hpr" v-if="isHighlightRef == 'point'">
                    <div>
                        <span>h：</span>
                        <el-input v-model="pointHRef" @change="changePointHPR('h', $event)" />
                    </div>
                    <div>
                        <span>p：</span>
                        <el-input v-model="pointPRef" @change="changePointHPR('p', $event)" />
                    </div>
                    <div>
                        <span>r：</span>
                        <el-input v-model="pointRRef" @change="changePointHPR('r', $event)" />
                    </div>
                </div>
            </div>
        </div>
    </Dialog>
    <GeometryPanel v-if="currentDialog == 'open'" :title="'选择几何体'" :isVisible="true" @close="currentDialog = undefined"
        @confirm="chooseConfirm" :isGeometryId="geometryId" :currentDataSet="currentDataSetRef" />

    <TooltipCom v-if="lineLengthGreaterEnableRef" :content="`创建的要素数量为 ${lineLengthNumRef} 个，超过了最大创建要素数100个。点击确定后请稍等，系统将只创建前100个要素。您是否要继续？
`" :title="'提示'" :isVisible="true"
        @close="lineLengthGreaterEnableRef = false" @confirm="lineLengthGreaterConfirm" />

    <TooltipCom v-if="planeLengthGreaterEnableRef" :content="`创建的要素数量为 ${planeLengthNumRef} 个，超过了最大创建要素数100个。点击确定后请稍等，系统将只创建前100个要素。您是否要继续？
`" :title="'提示'" :isVisible="true"
        @close="planeLengthGreaterEnableRef = false" @confirm="planeLengthGreaterConfirm" />

    <DialogCom v-if="lineEnableRef" :draggable="true" title="设置线参数" :width="'447'" :visible="true" @close="lineClose"
        @confirm="lineConfirm">
        <template v-slot:content>
            <div class="plane-box">
                <div class="plane-hpr">
                    <div>
                        <span>h：</span>
                        <el-input-number v-model="lineHRef" controls-position="right" @change="changeLine('h', $event)"
                             size="small" />
                    </div>
                    <div>
                        <span>p：</span>
                        <el-input-number v-model="linePRef" controls-position="right" @change="changeLine('p', $event)"
                             size="small" />
                    </div>
                    <div>
                        <span>r：</span>
                        <el-input-number v-model="lineRRef" controls-position="right" @change="changeLine('r', $event)"
                             size="small" />
                    </div>
                </div>
                <div class="plane-xy">

                    <div>
                        <span>偏移：</span>
                        <el-input-number v-model="offsetRef" controls-position="right" @change="changeLine('o', $event)"
                             size="small" />
                    </div>
                    <div>
                        <span>间隔：</span>
                        <el-input-number v-model="lineGapRef" controls-position="right"
                            @change="changeLine('l', $event)" :min="0.1" size="small" />
                    </div>

                </div>
            </div>

        </template>
    </DialogCom>
    <DialogCom v-if="planeEnableRef" :draggable="true" title="设置面参数" :width="'447'" :visible="true" @close="planeClose"
        @confirm="planeConfirm">
        <template v-slot:content>
            <div class="plane-box">
                <div class="plane-hpr">
                    <div>
                        <span>h：</span>
                        <el-input-number v-model="planeHRef" controls-position="right"
                            @change="changePlane('h', $event)"  size="small" />
                    </div>
                    <div>
                        <span>p：</span>
                        <el-input-number v-model="planePRef" controls-position="right"
                            @change="changePlane('p', $event)"  size="small" />
                    </div>
                    <div>
                        <span>r：</span>
                        <el-input-number v-model="planeRRef" controls-position="right"
                            @change="changePlane('r', $event)"  size="small" />
                    </div>
                </div>
                <div class="plane-xy">
                    <div>
                        <span>x间隔：</span>
                        <el-input-number v-model="xGapRef" controls-position="right" @change="changePlane('x', $event)"
                            :min="0.1" size="small" />
                    </div>
                    <div>
                        <span>y间隔：</span>
                        <el-input-number v-model="yGapRef" controls-position="right" @change="changePlane('y', $event)"
                            :min="0.1" size="small" />
                    </div>
                </div>
            </div>

        </template>
    </DialogCom>
</template>
<script setup lang="ts">
import Dialog from "@/components/Dialog.vue";
import { onMounted, ref, onBeforeUnmount, computed, watch, shallowRef } from "vue";
import { getProjectManager } from "@/scripts/getProjectManager";
import {
    createVueDisposer,
    toVR,
} from "earthsdk-ui";
import FucMenuList from "@/components/common/FucMenuList.vue";
import { placeMenuList } from "@/scripts/menu/cimrts/placeMenuList";
import GeometryPanel from "@/components/virtualbatch/GeometryPanel.vue";
import DialogCom from "@/components/common/DialogCom.vue";
import TooltipCom from "@/components/common/TooltipCom.vue";
import { findClassNameById } from "@/scripts/utils"

const props = withDefaults(defineProps<{ comInfo: any }>(), {});
const emits = defineEmits(["cancel"]);
const cancel = () => {
    emits("cancel", props.comInfo.id);
};
const uiLeft = document.body.clientWidth - 10 - 350;
// const uiTop = document.body.clientHeight - 40 - 300;
const uiTop = ref(60);


const d = createVueDisposer(onBeforeUnmount);
const objm = getProjectManager();

const cimrtsManager = getProjectManager().cimrtsManager;
const eSRtsTileset = cimrtsManager.eSRtsTileset;
const batchSet = cimrtsManager.batchSet as BatchSet;

const currentDialog = ref<any>(undefined);

const propSceneTree = toVR<any>(d, [objm, "propSceneTree"])

// 数据集列表
const dataSetRef = toVR<any>(d, [batchSet, "dataSet"]);
// 当前选中的数据集
const currentDataSetRef = toVR<any>(d, [batchSet, "currentDataSet"]);
// 要素类树
const featureClassTreeRef = toVR<any>(d, [batchSet, "featureClassTree"]);
// 当前选中的要素类
const currentFeatureClassRef = toVR<any>(d, [batchSet, "currentFeatureClass"]);
// 当前选中的要素类名称
const currentFeatureClassNameRef = toVR<any>(d, [batchSet, "currentFeatureClassName"]);
// 当前选中的几何体名称
const currentGeometryRef = toVR<any>(d, [batchSet, "currentGeometry"]);
// 被选中的几何体id
const geometryId = toVR<any>(d, [batchSet, "geometryId"]);
// 操作多边形
const isHighlightRef = toVR<string>(d, [batchSet, "isHighlight"])
// 被选中的几何体长、宽、高
const geometryLengthRef = toVR<any>(d, [batchSet, "geometryLength"]);
const geometryWeightRef = toVR<any>(d, [batchSet, "geometryWeight"]);
const geometryHeightRef = toVR<any>(d, [batchSet, "geometryHeight"]);

// point的hpr
const pointHRef = toVR<any>(d, [batchSet, "pointH"])
const pointPRef = toVR<any>(d, [batchSet, "pointP"])
const pointRRef = toVR<any>(d, [batchSet, "pointR"])

// line的hpr 间隔
const lineHRef = toVR<any>(d, [batchSet, "lineH"])
const linePRef = toVR<any>(d, [batchSet, "lineP"])
const lineRRef = toVR<any>(d, [batchSet, "lineR"])
const lineGapRef = toVR<any>(d, [batchSet, "lineGap"])
const offsetRef = toVR<any>(d, [batchSet, "offset"])

// 设置线参数的弹窗
const lineEnableRef = toVR<any>(d, [batchSet, "lineEnable"])
// 设置线参数 创建要素时点位太多提示框
const lineLengthGreaterEnableRef = toVR<any>(d, [batchSet, "lineLengthGreaterEnable"])
// 设置线参数 >100 个数
const lineLengthNumRef = toVR<any>(d, [batchSet, "lineLengthNum"])

// plane的hpr xy间隔
const planeHRef = toVR<any>(d, [batchSet, "planeH"])
const planePRef = toVR<any>(d, [batchSet, "planeP"])
const planeRRef = toVR<any>(d, [batchSet, "planeR"])
const xGapRef = toVR<any>(d, [batchSet, "xGap"])
const yGapRef = toVR<any>(d, [batchSet, "yGap"])
// 设置面参数的弹窗
const planeEnableRef = toVR<any>(d, [batchSet, "planeEnable"])
// 设置面参数 创建要素时点位太多提示框
const planeLengthGreaterEnableRef = toVR<any>(d, [batchSet, "planeLengthGreaterEnable"])
// 设置面参数 >100 个数
const planeLengthNumRef = toVR<any>(d, [batchSet, "planeLengthNum"])

// 数据源类型
const sourceTypeRef = toVR<any>(d, [batchSet, "sourceType"])
// 选择几何体
const chooseClick = () => {
    currentDialog.value = "open";
};

const clearGeometry = () => {
    geometryId.value = ""
    currentGeometryRef.value = ""
}

// 修改选择要素类
const changedTree = (id: any) => {
    currentFeatureClassNameRef.value = findClassNameById(id,featureClassTreeRef.value)
    console.log(currentFeatureClassNameRef.value);
}

/**选择几何体 弹出框确定按钮 */
const chooseConfirm = (val: any) => {
    currentDialog.value = undefined
    sourceTypeRef.value = val.sourceType
    geometryId.value = val.id
    currentGeometryRef.value = val.name ? val.name : val.id
}

function toNumber(input:any) {
  // 尝试将输入转换为数字
  const num = Number(input);
  
  // 检查转换结果是否为有效数字
  if (typeof num === 'number' && !isNaN(num)) {
    return num;
  }
  
  // 无效输入时返回0
  return 0;
}

// 修改点的参数
const changePointHPR = (type: string, e: any) => {
    if (type == "h") {
        pointHRef.value = toNumber(e)
    } else if (type == "p") {
        pointPRef.value = toNumber(e)
    } else if (type == "r") {
        pointRRef.value = toNumber(e)
    }
}

// 设置线 hpr 间隔 面板的关闭按钮
const lineClose = () => {
    lineEnableRef.value = false
    isHighlightRef.value = ""
    placeMenuList.value.map((i: any) => i.status = "none")

}

// 设置线 hpr 间隔 面板的确定
const lineConfirm = () => {
    batchSet.lineEnableEvent.emit()
    placeMenuList.value.map((i: any) => i.status = "none")
}

// 修改线的参数
const changeLine = (type: string, e: any) => {
    if (type == "h") {
        lineHRef.value = Number(e)
    } else if (type == "p") {
        linePRef.value = Number(e)
    } else if (type == "r") {
        lineRRef.value = Number(e)
    } else if (type == "l") {
        lineGapRef.value = Number(e)
    } else if (type == "o") {
        offsetRef.value = Number(e)
    }
}

// 线 大于 100个点时的确定按钮
const lineLengthGreaterConfirm = () => {
    batchSet.lineLengthGreaterEnableEvent.emit()
}

// 修改面的参数
const changePlane = (type: string, e: any) => {
    if (type == "h") {
        planeHRef.value = Number(e)
    } else if (type == "p") {
        planePRef.value = Number(e)
    } else if (type == "r") {
        planeRRef.value = Number(e)
    } else if (type == "x") {
        xGapRef.value = Number(e)
    } else if (type == "y") {
        yGapRef.value = Number(e)
    }
}

// 设置面 hpr 间隔 面板的关闭按钮
const planeClose = () => {
    planeEnableRef.value = false
    isHighlightRef.value = ""
    placeMenuList.value.map((i: any) => i.status = "none")
}

// 设置面 hpr 间隔 面板的确定
const planeConfirm = () => {
    batchSet.planeEnableEvent.emit()
    placeMenuList.value.map((i: any) => i.status = "none")
}

// 面 大于 100个点时的确定按钮
const planeLengthGreaterConfirm = () => {
    batchSet.planeLengthGreaterEnableEvent.emit()
}

// 鼠标点击组件
const clickComponent = (item: any) => {
    isHighlightRef.value = item.id;
    if (!geometryId.value) return;
    item.status != "active" ? item.status = "active" : item.status = "none";
    if (item.status == "none") {
        isHighlightRef.value = ''
        objm.propSceneTree = undefined
    }
}


watch(propSceneTree, (val) => {
    if (propSceneTree.value) return;
    if (isHighlightRef.value) {
        const item = placeMenuList.value.find((item: any) => item.id == isHighlightRef.value);
        // @ts-ignore
        item.status = 'none'
    }
    objm.propSceneTree = undefined
    isHighlightRef.value = ''
})

onMounted(() => {
    batchSet.init();
});
onBeforeUnmount(() => {
    batchSet.clear();
    placeMenuList.value.map((i: any) => i.status = "none")
});
</script>

<style scoped>
.box {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}

.cimrts-menu {
    background-color: #f0f0f0;
    width: calc(100%);
    height: 40px;
    display: flex;
}

.box-choose {
    padding: 15px 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.item {
    display: grid;
    grid-template-columns: 60px 1fr;
    /* justify-content: center; */
    align-items: center;
}


.choose-img {
    display: flex;
    align-items: center;
}

.list-img {
    width: 25px;
    height: 25px;
    cursor: pointer;
}

.choose {
    background: url("@/assets/cimrts/propPanel/choose.png") no-repeat;
    background-size: 100% 100%;
    margin-left: 10px;
}

.no-choose {
    pointer-events: none;
}

.beizhu {
    font-size: 13px;
    color: rgba(0, 0, 255, 1);
}

.point-hpr {
    display: flex;
    gap: 10px;
}

.point-hpr>div {
    display: flex;
    align-items: center;
}

.plane-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.plane-hpr {
    display: flex;
    gap: 10px;
}

.plane-hpr>div {
    display: flex;
    align-items: center;
}

.plane-xy {
    display: flex;
    gap: 10px;
}

.plane-xy>div {
    display: grid;
    grid-template-columns: 60px 1fr;
    align-items: center;
}

.el-input-number--small {
    width: 100px;
}
</style>